<template>
  <div class="btn" :class="[type,size]">
      <slot></slot>
      <!-- 匿名插槽 一个组件只能有一个匿名插槽 -->
      {{text}}
      <!-- <slot name="one"></slot> -->
       <!-- 具名插槽 -->
      <slot name="one" :data="test">
         <h3>{{test}}</h3>
      </slot>
      <!-- 作用域插槽 可以向使用插槽的一方传递参数 -->
  </div>
</template>

<script>
export default {
  // props:['text']
  props:{
    type:{
      type:String,
      default:"default"
    },
    size:{
      type:String
    },
    text:{
      type:[String,Number,Boolean],  //代表传递的过来的参数必须是字符串 不然报错
      default:"确定" //参数的默认值 如果没有传参 就使用默认值
      // required:true  //是否必传 
    },
    // XXX:{ //定义接收数组
    //   type:Array,
    //   default:() =>{
    //     return [11,22,33]
    //   }
    // },
    // xxx:{  //定义接收对象
    //   type:Object,
    //    default:() =>{
    //     return {xx:'xxx'}
    //   }
    // }
  },
  data(){
    return{
      test:"我是子级"
    }
  }

}
</script>

<style>
.btn{
  display: inline-block;
  color: #fff;
  padding: 10px 15px;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  background-color: #6666;
}
.default{
  background-color: #fff;
  color: #000;
}
.primary{
  background-color: #0099ff;
  color: #fff;
}
.success{
  background-color: #0a9211;
  color: #fff;
}
.danger{
  background-color: #cc1515;
  color: #fff;
}
/* 中型 */
.medium{ 
  padding: 8px 12px;
}
/* 小型 */
.small{
  padding: 4px 8px;
}

</style>